<template>
  <div class="systemUserManage">
    <!-- <h1>系统用户管理</h1> -->
    <search :state="state"></search>
    <div class="info">
      <div class="head flex-between">
        <div class="left flex-start">
          <div
            @click="state = 0"
            :class="[state === 0 ? 'selected' : '', 'adminInfo', 'cp']"
          >
            管理员信息
          </div>
          <div
            @click="state = 1"
            :class="[state === 1 ? 'selected' : '', 'registered', 'cp']"
          >
            已注册
          </div>
          <div
            @click="state = 2"
            :class="[state === 2 ? 'selected' : '', 'unregistered', 'cp']"
          >
            未注册
          </div>
        </div>
        <div class="right flex-start">
          <div class="btn-white3 cp" @click="daochu">导出</div>
          <div class="btn-blue2 cp" @click="addFlag = true">添加</div>
        </div>
      </div>
      <admin-table v-if="state === 0" ref="allAdmin"></admin-table>
      <registered-table v-if="state === 1" @edit="edit" ref="registered"></registered-table>
      <unregistered-table v-if="state === 2" @edit="edit" ref="unregistered"></unregistered-table>
    </div>

    <!-- <mid-dialog
      title="编辑"
      v-show="editFlag === true"
      @close="editFlag = false"
    >
      <div class="addapp">
        <table>
          <tr>
            <td>姓名</td>
            <td>123</td>
          </tr>
          <tr>
            <td>邮箱号码</td>
            <td>123</td>
          </tr>
          <tr>
            <td>职位设置</td>
            <td>
              <div class="type">
                <input
                  @focus="imgflag = false"
                  class="searchInput select"
                  type="text"
                  placeholder="请输入服务器类型"
                  v-model="position"
                />
                <div @click="imgflag = !imgflag" class="pic">
                  <img :src="imgurl" alt="" />
                </div>
                <ul v-show="imgflag === false" class="options">
                  <li
                    v-for="item in options"
                    :key="item"
                    @click="setting(item)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </table>

        <div class="btns flex-start">
          <div class="btn-white2">取消</div>
          <div class="btn-blue2">保存</div>
        </div>
      </div>
    </mid-dialog> -->
    <edit v-if="editFlag === true" @close="editFlag = false" :state="state"></edit>
    <add v-if="addFlag === true" @close="addFlag = false" :state="state"></add>

    <!-- <mid-dialog title="添加" v-show="addFlag === true" @close="addFlag = false">
      <div class="addapp">
        <table>
          <tr>
            <td><span class="c-error">*</span>姓名</td>
            <td>
              <input type="text" class="searchInput" placeholder="请输入姓名" />
              <div class="msg c-error">请输入正确的姓名</div>
            </td>
          </tr>
          <tr>
            <td><span class="c-error">*</span>邮箱号码</td>
            <td>
              <input
                type="text"
                class="searchInput"
                placeholder="请输入邮箱号码"
              />
              <div class="msg c-error">请输入正确的邮箱号码</div>
            </td>
          </tr>
          <tr>
            <td><span class="c-error">*</span>职位设置</td>
            <td>
              <div class="type">
                <input
                  @focus="imgflag = false"
                  class="searchInput select"
                  type="text"
                  placeholder="请输入服务器类型"
                  v-model="position"
                />
                <div @click="imgflag = !imgflag" class="pic">
                  <img :src="imgurl" alt="" />
                </div>
                <ul v-show="imgflag === false" class="options">
                  <li
                    v-for="item in options"
                    :key="item"
                    @click="setting(item)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </table>

        <div class="btns flex-start">
          <div class="btn-white2">取消</div>
          <div class="btn-blue2">保存</div>
        </div>
      </div>
    </mid-dialog> -->
  </div>
</template>

<script>
import search from './components/search'
import adminTable from './components/adminTable'
import registeredTable from './components/registeredTable'
import unregisteredTable from './components/unregisteredTable'
import imgSrc1 from '@/assets/dropDown.png'
import imgSrc2 from '@/assets/pullUp.png'
import add from './components/add'
import edit from './components/edit'

export default {
  components: {
    search,
    adminTable,
    registeredTable,
    unregisteredTable,
    add,
    edit
  },
  data () {
    return {
      state: 0,
      editFlag: false,
      position: '',
      imgflag: true,
      addFlag: false,
      options: ['管理员', 'xxx']
    }
  },
  computed: {
    imgurl () {
      if (this.imgflag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    }
  },
  methods: {
    setting (val) {
      this.position = val
      this.imgflag = true
    },
    edit (info) {
      this.editFlag = true
      sessionStorage.setItem('adminEmail', info[0])
      sessionStorage.setItem('adminName', info[1])
      sessionStorage.setItem('roleName', info[2])
    },
    daochu () {
      switch (this.state) {
        case 0:
          this.$refs.allAdmin.daochu()
          break
        case 1:
          this.$refs.registered.daochu()
          break
        case 2:
          this.$refs.unregistered.daochu()
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.systemUserManage {
  .info {
    width: 100%;
    min-height: 830px;
    background: #ffffff;
    margin-top: 24px;
    padding: 0 24px;
    border-radius: 8px;
    .head {
      height: 62px;
      border-bottom: 1px solid #e6e9f0;
      line-height: 62px;
      .adminInfo {
        width: 80px;
        height: 46px;
        margin-left: 8px;
        text-align: center;
        line-height: 46px;
      }
      .registered {
        width: 80px;
        height: 46px;
        margin-left: 24px;
        text-align: center;
        line-height: 46px;
      }
      .unregistered {
        width: 80px;
        height: 46px;
        margin-left: 24px;
        text-align: center;
        line-height: 46px;
      }

      .btn-blue2 {
        margin-left: 20px;
      }
    }
  }
  // .app {
  //   text-align: center;
  //   table {
  //     position: absolute;
  //     z-index: 100;
  //     left: 50%;
  //     top: 50%;
  //     transform: translate(-50%, -50%);
  //     td {
  //       &:nth-child(1) {
  //         height: 60px;
  //         white-space: nowrap;
  //         text-align: right;
  //       }
  //       &:nth-child(2) {
  //         width: 300px;
  //         height: 60px;
  //         padding-left: 20px;
  //         text-align: left;
  //       }
  //     }
  //   }

  //   .btns {
  //     position: absolute;
  //     bottom: 20px;

  //     .btn-white2 {
  //       width: 100px;
  //       margin-left: 156px;
  //       margin-right: 20px;
  //     }
  //     .btn-blue2 {
  //       width: 100px;
  //     }
  //   }
  // }
  // .addapp {
  //   text-align: center;
  //   table {
  //     position: absolute;
  //     z-index: 100;
  //     left: 50%;
  //     top: 50%;
  //     transform: translate(-50%, -50%);
  //     td {
  //       &:nth-child(1) {
  //         height: 0px;
  //         white-space: nowrap;
  //         text-align: right;
  //         line-height: 40px !important;
  //         vertical-align: top;
  //       }
  //       &:nth-child(2) {
  //         width: 300px;
  //         height: 0px;

  //         padding-left: 20px;
  //         text-align: left;
  //       }
  //     }
  //   }
  //   .msg {
  //     margin: 8px 0;
  //   }
  //   .btns {
  //     position: absolute;
  //     bottom: 20px;

  //     .btn-white2 {
  //       width: 100px;
  //       margin-left: 156px;
  //       margin-right: 20px;
  //     }
  //     .btn-blue2 {
  //       width: 100px;
  //     }
  //   }
  // }
}
.selected {
  color: #304eec;
  border-bottom: 2px solid #304eec;
}
</style>
